<template>
	<el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="visible" :close-on-click-modal="false" fullscreen>
		<el-form ref="form" :model="form" :rules="rules">
			<el-form-item label="快递名称" :label-width="formLabelWidth" prop="name">
				<el-input v-model="form.name" autocomplete="off" placeholder="请输入快递名称"></el-input>
			</el-form-item>
			<el-form-item label="计费方式" :label-width="formLabelWidth" prop="billingMethod">
				<fortress-radio-group v-model="form.billingMethod" :dictList="BillingMethodType_goodsList"></fortress-radio-group>
			</el-form-item>
			<el-form-item label="首重价格" :label-width="formLabelWidth" prop="firstWeightPrice">
				<el-input-number v-model="form.firstWeightPrice"></el-input-number>
			</el-form-item>
			<el-form-item label="续重价格" :label-width="formLabelWidth" prop="renewalPrice">
				<el-input-number v-model="form.renewalPrice"></el-input-number>
			</el-form-item>
			<el-form-item label="是否默认" :label-width="formLabelWidth" prop="isDefault">
				<el-switch
					v-model="form.isDefault"
					active-color="#13ce66"
					inactive-color="#ff4949"
					:active-value="1"
					:inactive-value="2"
				></el-switch>
			</el-form-item>
			<el-form-item label="排序字段" :label-width="formLabelWidth" prop="sort">
				<el-input-number v-model="form.sort"></el-input-number>
			</el-form-item>
			<el-form-item label="快递公司ID" :label-width="formLabelWidth" prop="companyId">
				<fortress-select
					v-model="form.companyId"
					:dictList="companyIdList"
					placeholder="请选择快递公司ID"
					clearable
				></fortress-select>
			</el-form-item>
			<el-form-item label="区域设置" :label-width="formLabelWidth" prop="areaType">
				<el-switch
					v-model="form.areaType"
					active-color="#13ce66"
					inactive-color="#ff4949"
					:active-value="1"
					:inactive-value="2"
				></el-switch>
			</el-form-item>
			<el-form-item label="配送设置JSON" :label-width="formLabelWidth" prop="deliveryJson">
				<!-- <el-input type="textarea" :rows="2" placeholder="请输入配送设置JSON" v-model="form.deliveryJson"></el-input> -->
				<el-table :data="form.deliveryJson">
					<el-table-column prop="name" label="运送到" width="300">
						<template #default="{row}">
							<template v-if="row.isDefault">
								{{ row.name }}
							</template>
							<fortress-region-checked v-model="row.region" v-else>
								<template #default="{open, value}">
									<div class="region-list">
										{{ value }}
									</div>
									<el-button type="text" size="mini" @click="open">编辑</el-button>
								</template>
							</fortress-region-checked>
						</template>
					</el-table-column>
					<el-table-column label="首重(克)" width="160">
						<template #default="{row}">
							<el-input type="number" v-model="row.topPriority"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="首费(元)" width="160">
						<template #default="{row}">
							<el-input type="number" v-model="row.firstFee"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="续重(克)" width="160">
						<template #default="{row}">
							<el-input type="number" v-model="row.renewalWeight"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="续费(元)" width="160">
						<template #default="{row}">
							<el-input type="number" v-model="row.renewal"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="邮费满额包邮(元)" width="160">
						<template #default="{row}">
							<el-input type="number" v-model="row.freeShippingFull"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="管理">
						<template #default="{row, $index}">
							<el-button
								v-if="!row.isDefault"
								type="default"
								icon="el-icon-close"
								size="mini"
								@click="onDeleteDeliveryLine($index)"
							></el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-button size="small" icon="el-icon-plus" @click="toSetNewRegion">新增配送区域</el-button>
			</el-form-item>
			<el-form-item label="不配送设置JSON" :label-width="formLabelWidth" prop="noDeliveryJson">
				<!-- <el-input type="textarea" :rows="2" placeholder="请输入不配送设置JSON" v-model="form.noDeliveryJson"></el-input> -->
				<fortress-region-checked v-model="form.noDeliveryJson"></fortress-region-checked>
			</el-form-item>
			<el-form-item label="状态" :label-width="formLabelWidth" prop="status">
				<el-switch
					v-model="form.status"
					active-color="#13ce66"
					inactive-color="#ff4949"
					:active-value="true"
					:inactive-value="false"
				></el-switch>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
			<el-button type="primary" size="medium" @click="submitForm('form')">确 定</el-button>
		</div>
	</el-dialog>
</template>
<script>
import { deliverymethodInfo, deliverymethodSave, deliverymethodEdit } from "@/api/goods/deliverymethod.js"
import { enumList, urlList } from "@/api/public.api.js"
import * as ftVal from "@/common/fortressValidator.js"
import { sysregionTree } from "@/api/system/sysregion.js"

export default {
	data() {
		return {
			visible: false,
			form: {
				name: "",
				billingMethod: "",
				firstWeightPrice: "",
				renewalPrice: "",
				isDefault: "2",
				sort: "",
				companyId: "",
				areaType: "2",
				deliveryJson: [
					{
						name: "全国 [默认运费]",
						isDefault: true,
						region: {},
						topPriority: "", // 首重(克)
						firstFee: "", // 首费(元)
						renewalWeight: "", // 续重(克)
						renewal: "", // 续费(元)
						freeShippingFull: "", // 邮费满额包邮(元)
					},
				],
				noDeliveryJson: {},
				status: false,
			},
			formLabelWidth: "120px",
			rules: {
				name: [{ required: true, message: "请输入快递名称", trigger: "blur" }],
				billingMethod: [{ required: true, message: "请输入计费方式", trigger: "blur" }],
				firstWeightPrice: [
					{ required: true, message: "请输入首重价格", trigger: "blur" },
					{ validator: ftVal.validateTwoPoint, trigger: "blur" },
				],
				renewalPrice: [
					{ required: true, message: "请输入续重价格", trigger: "blur" },
					{ validator: ftVal.validateTwoPoint, trigger: "blur" },
				],
				isDefault: [{ required: true, message: "请输入是否默认", trigger: "blur" }],
				sort: [
					{ required: true, message: "请输入排序字段", trigger: "blur" },
					{ validator: ftVal.validatePInteger, trigger: "blur" },
				],
				companyId: [{ required: true, message: "请输入快递公司ID", trigger: "blur" }],
				areaType: [{ required: true, message: "请输入区域设置", trigger: "blur" }],
			},
			BillingMethodType_goodsList: [],
			YesNoList: [],
			companyIdList: [],

			regionList: [],
		}
	},
	async created() {
		const { data: regionList } = await sysregionTree()
		this.regionList = regionList
	},
	methods: {
		toSetNewRegion() {
			this.form.deliveryJson.push({
				name: "",
				isDefault: false,
				region: {
					province: "",
					city: "",
					area: "",
				},
				topPriority: "", // 首重(克)
				firstFee: "", // 首费(元)
				renewalWeight: "", // 续重(克)
				renewal: "", // 续费(元)
				freeShippingFull: "", // 邮费满额包邮(元)
			})
		},
		onDeleteDeliveryLine(index) {
			this.form.deliveryJson.splice(index, 1)
		},

		queryEnumList() {
			this.BillingMethodType_goodsList = []
			enumList("BillingMethodType", "goods").then(resp => {
				if (resp.code == 0) {
					this.BillingMethodType_goodsList = resp.data
				}
			})
			this.YesNoList = []
			enumList("YesNo", "").then(resp => {
				if (resp.code == 0) {
					this.YesNoList = resp.data
				}
			})
		},
		queryUrlList() {
			this.companyIdList = []
			urlList("/system/bank/list").then(resp => {
				if (resp.code == 0) {
					if (resp.data) {
						resp.data.forEach(item => {
							this.companyIdList.push({ code: item.id, name: item.bankName })
						})
					}
				}
			})
		},
		init(id) {
			this.resetForm()
			this.queryEnumList()
			this.queryUrlList()
			//修改
			if (id) {
				deliverymethodInfo(id).then(resp => {
					if (resp.code == 0) {
						this.$nextTick(() => {
							this.form = {
								...this.form,
								...resp.data,
							}
						})
					} else {
						this.$msg({
							message: resp.msg,
							type: "error",
						})
					}
				})
			}
			this.visible = true
		},
		//提交表单数据
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					//修改
					if (this.form.id) {
						deliverymethodEdit(this.form).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								this.$emit("refreshData")
								this.visible = false
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
						//新增
					} else {
						deliverymethodSave(this.form).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								this.$emit("refreshData")
								this.visible = false
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
					}
				} else {
					console.log("error submit!!")
					return false
				}
			})
		},
		resetForm() {
			this.form = {
				name: "",
				billingMethod: "",
				firstWeightPrice: "",
				renewalPrice: "",
				isDefault: "2",
				sort: "",
				companyId: "",
				areaType: "2",
				deliveryJson: [
					{
						name: "全国 [默认运费]",
						isDefault: true,
						region: [],
						topPriority: "", // 首重(克)
						firstFee: "", // 首费(元)
						renewalWeight: "", // 续重(克)
						renewal: "", // 续费(元)
						freeShippingFull: "", // 邮费满额包邮(元)
					},
				],
				noDeliveryJson: {},
				status: false,
			}
			this.$nextTick(() => {
				if (this.$refs["form"]) {
					this.$refs["form"].resetFields()
				}
			})
		},
	},
}
</script>
<style scoped lang="scss">
.region-list {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 10;
}
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
	height: auto;
	max-height: 274px;
	padding: 7px;
	overflow: hidden;
	overflow-y: auto;
	font-weight: normal;
}
</style>
